<template>
	<div  class="container">
		<el-page-header @back="goBack" content="文章列表"></el-page-header>
		<el-row type="flex" justify="space-between" class="nav-bar">
			<el-col :span="3">
				<el-button type="primary" plain @click="create" icon="el-icon-plus">添加文章</el-button>
			</el-col>
			<el-col>
				<el-button type="danger" class="e-m-l-15" plain @click="delSelectData" icon="el-icon-delete">批量删除</el-button>
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" label-width="auto" class="nav-bar-form">
					<el-form-item>
						<el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-table :data="tableData" style="width: 100%" stripe @selection-change="handleSelectionChange">
			<el-table-column
                fixed
                type="selection"
                width="55">
            </el-table-column>
			<el-table-column fixed prop="title" label="标题">
			</el-table-column>
			<el-table-column prop="newstypename" label="新闻分类" width="150">
			</el-table-column>
			<el-table-column prop="createddatetime" label="创建时间" width="200">
			</el-table-column>
			<el-table-column prop="state" label="状态" width="150">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.ishide == '否'">显示</span>
					<span class="color-danger" v-else="">隐藏</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="180">
				<template slot-scope="scope">
					<el-button @click="edit(scope.row.id)" type="text" size="small" v-if="jurisdiction.edit">编辑</el-button>
					<el-button @click="del(scope.row.id)" type="text" size="small" v-if="jurisdiction.del">删除</el-button>
					<!-- <el-button type="text" size="small">审核</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { promised } from 'q'

	export default {
		layout: 'admin',
		head() {
			return {
				title: '公告列表' 
			}
		},
		data() {
			return {
				key: '',
				page: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				multipleSelection: [],
				jurisdiction:{},
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			getList() {
				this.$axios.post('/newsDetail/list', {
					"PageIndex": this.page,
					"PageSize": this.pageSize,
					"Key": this.key
				}).then((res) => {
					this.tableData = res.rows;
					this.total = res.total;
					this.jurisdiction = res;
				})
			},
			create() {
				this.$router.push({
					path:'/news/create/'
				})
			},
			edit(id) {
				this.$router.push({
					path:'/news/edit/?id=' + id
				})
			},
			pageChange(e) { // 页码切换事件
				this.page = e;
				this.getList()
			},
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val;
				this.getList()
			},
			del(id) {
				return new Promise((resolve, reject)=>{
					this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.post('/newsDetail/delete?Ids=' + id).then((res) => {
							this.$message.success(res.msg);
							this.getList()
							resolve()
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				})
				
			},
			handleSelectionChange(arr) {
				arr.forEach((item,index)=>{
					this.multipleSelection.push(arr[index].id)
				})
				console.log(this.multipleSelection)
			},
			delSelectData(){
				this.del(this.multipleSelection).then(()=>{
					this.page = 1;
					this.getList()
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav-bar {
		padding: 45px 0 0;
	}

	.send {
		margin-top: 15px;
		margin-right: 10px;
	}

	.dialogForm {
		display: flex;
		flex-wrap: wrap;

		.el-form-item {
			width: 50%;
			float: left;

			&.all {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
</style>
